<template>
  <div class="bg">
    <div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px" label-position="left">
        <span id="title">{{ this.MyData.title }}</span>
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username" clearable placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-goods" type="password" v-model="loginForm.password" clearable show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="vericode" label="验证码" prop="vercode">
          <el-input prefix-icon="el-icon-coordinate" v-model="loginForm.vercode" clearable placeholder="请输入验证码"></el-input>
          <img :src="verifyurl" width="100px" height="40px" v-on:click="sendSms()" :alt="this.verify">
        </el-form-item>
        <el-row>
          <el-button type="primary" @click="login" plain>登录</el-button>
          <el-button type="info" @click="resetLoginForm" plain>重置</el-button>
        </el-row>
        <el-row class="register">
          <router-link :to="{ name: 'phone' }"><el-button type="text">手机号登录</el-button></router-link>
          <router-link :to="{ name: 'registe' }"><el-button type="text">还没有账号，去注册…</el-button></router-link>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import qsp from 'qs'
import { nemoMD5 } from '../../assets/js/md5.js'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        vercode: ''
      },
      // 这是表单的验证规则
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            min: 6,
            message: '密码长度不得少于6位',
            trigger: 'blur'
          }
        ],
        vercode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      // 生成的验证码
      verify: '',
      verifyurl: ''
    }
  },
  created () {
    this.sendSms()
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
      this.sendSms()
    },
    async login () {
      await this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // 跳过接口
        // console.log('登录事件')
        if (this.verify === this.loginForm.vercode) {
          // 加密
          this.loginForm.password = nemoMD5(this.loginForm.password)
          const { data: res } = await this.$http.post('user/login', qsp.stringify(this.loginForm))
          if (res.code !== 200) return this.$message.error(res.msg)
          const data = res.data
          window.localStorage.setItem('username', data.username)
          // 2.通过链式编程导航跳转到后台主页，路由地址/home
          await this.$router.push('/home')
        } else {
          this.$message.error('验证码错误，请重新输入！')
          this.loginForm.vercode = ''
          this.sendSms()
        }
      })
    },
    // 验证码 图片
    sendSms () {
      const code = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      const url = 'http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx/enValidateImage?byString='
      this.verify = code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)]
      this.verifyurl = url + this.verify
      console.log(this.verify)
    }
  }
}
</script>

<style scoped>
.bg{
  background: url("../../assets/images/backgroud.png") no-repeat center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#title{
  position: relative;
  top: -100px;
  left: 80px;
  font-size: 35px;
  color: white;
}
.el-form{
  width: 360px;
  margin-right: 20px;
  padding: 20px 60px;
  border-radius: 5px;
  border: 2px solid rgba(249, 244, 244, 0.79);
}
.el-row{
  display: flex;
  justify-content: center;
}
.el-row .el-button{
  margin: 0 30px;
}
::v-deep .el-form-item__label{
  color: white;
  font-size: 15px;
  font-weight: bolder;
}
.vericode .el-input{
  width: 160px;
}
.el-form img{
  position: absolute;
  left: 178px;
}
.register{
  margin: 15px 0 15px 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.register .el-button{
  position: relative;
  right: -40px;
}
::v-deep .el-button--text span{
  color: white;
}
</style>
